<template>
	<view class="login">
		<!-- 		<view class="">
			<image class="logo" :src="`${CDN}/logo.png`" mode="">
			</image>
		</view> -->
		<!-- <view class="desc">
			一键买书包，就找星链
		</view>
		<view class="desc">
			宅狸家，维修改造真透明
		</view> -->

		<view class="action">
			<view @click="checkAgree" v-if="!isAgree" class="btn">
				手机快捷登录
			</view>
			<button v-else class="btn active" type="default" open-type="getPhoneNumber"
				@getphonenumber="handleGetPhoneNumber">
				手机快捷登录
			</button>

			<!-- <view class="read">
        <tn-checkbox v-model="isAgree">我已阅读并同意</tn-checkbox>
        <view class="word">
          <text class="blue" @click="goOther(2)">《用户协议》</text>和<text
            class="blue"
            @click="goOther(3)"
            >《隐私政策》</text
          >
        </view>
      </view> -->
		</view>

		<tn-popup v-model="showPopup">
			<view class="modal">
				<view class="tip-container">
					<view class="tip">YongBao减脂餐想要</view>
					<view class="tip"> 获取您的昵称和头像 </view>

					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="url" :src="avatar_url"></image>
					</button>

					<view class="nickname">
						<input type="nickname" v-model="nickname" maxlength="50" placeholder="点击输入昵称" />
					</view>
				</view>

				<view class="action">
					<view @click="cancel" class="btn"> 取消 </view>
					<view @click="getUserProfile" class="btn active"> 同意 </view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getPhoneNumber,
		authLogin
	} from "@/api/user";

	import {
		uploadImage
	} from "@/api/common";

	const isAgree = ref(true);
	const phoneNumber = ref("");
	const showPopup = ref(false);
	const nickname = ref("");
	const avatar_url = ref("");

	const onChooseAvatar = async (e) => {
		const res = await uploadImage(e.detail.avatarUrl, {
			module: "avatar",
		});
		if (res) {
			avatar_url.value = res;
		}
	};

	const goHome = () => {
		uni.navigateTo({
			url: "/pages/page/index",
		});
	};

	// 1.通过code获取手机号
	const handleGetPhoneNumber = async (e) => {
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			const res = await getPhoneNumber({
				code: e.detail.code,
			});
			phoneNumber.value = res.data.phoneNumber;
			// 2.如果之前已经注册过了 则直接去首页 并设置 token
			if (res.data.register === 1) {
				uni.setStorageSync("token", res.data.token);
				goHome();
			} else {
				// 3.没有注册就弹框-然后获取用户头像和昵称
				showPopup.value = true;
			}
		} else {
			uni.showToast({
				icon: "none",
				title: "请授权登录",
			});
		}
	};
	// 获取用户昵称和头像
	const getUserProfile = () => {
		if (!avatar_url.value || !nickname.value) {
			uni.showToast({
				title: "请设置头像和昵称",
				icon: "none",
			});
			return;
		}
		if (uni.getUserProfile) {
			// 获取用户信息
			uni.getUserProfile({
				desc: "登录",
				lang: "zh_CN",
				success(info) {
					handleLogin(info);
				},
			});
		}
	};

	// 调用后端登录接口
	const login = async (info, code) => {
		const res = await authLogin({
			code,
			avatar: avatar_url.value,
			nickName: nickname.value,
			phoneNumber: phoneNumber.value,
		});
		if (res.data) {
			uni.setStorageSync("token", res.data);
			goHome();
		}
	};

	// 4.用户点击确定获取用户头像和昵称
	const handleLogin = (info) => {
		uni.login({
			provider: "weixin",
			success(res) {
				login(info, res.code);
			},
		});
	};

	const checkAgree = () => {
		if (!isAgree.value) {
			uni.showToast({
				icon: "none",
				title: "请同意用户协议和隐私政策",
			});
		}
	};
	const cancel = () => {
		showPopup.value = false;
		goHome();
	};
	const goOther = (type) => {
		uni.navigateTo({
			url: `/pagesMy/setting/about?type=${type}`,
		});
	};
</script>

<style lang="scss" scoped>
	.login {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		.logo {
			width: 226rpx;
			height: 59rpx;
			margin: 87rpx auto;
			display: block;
		}

		.desc {
			text-align: center;
			font-size: 36rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 44rpx;
		}
	}

	.action {
		// margin-top: 379rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.btn {
			width: 538rpx;
			height: 94rpx;
			background: #999999;
			border-radius: 47rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #fffefe;

			&::after {
				display: none;
			}

			&.active {
				background: #49b9fe;
				color: #fff;
			}
		}

		.read {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			font-size: 27rpx;
			font-weight: 400;
			color: #999999;

			label {
				display: flex;
				align-items: center;
			}

			.word {
				height: 56rpx;
				display: flex;
				align-items: center;
			}

			.blue {
				color: #49b9fe;
			}
		}
	}

	.modal {
		width: 538rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;

		.tip-container {
			text-align: center;
			margin-top: 80rpx;
		}

		.tip {
			margin-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.action {
			margin-top: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
		}

		.btn {
			width: 50%;
			border-radius: 0;
			background-color: #fff;
			color: rgba(0, 0, 0, 0.5);
		}
	}

	.avatar-btn {
		margin-top: 72rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
		padding: 0;

		.url {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.nickname {
		margin: 20rpx auto 40rpx;
		width: 486rpx;
		height: 84rpx;
		background: #ebebeb;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 0.3);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		input {
			width: 486rpx;
			height: 84rpx;
			padding-left: 32rpx;
		}
	}
</style>